<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 协作白板系统</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f7fa;
            margin: 0;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 250px;
            background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
            color: white;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .sidebar-header {
            padding: 25px 20px;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.2);
        }

        .sidebar-header i {
            margin-right: 10px;
            color: #3498db;
        }

        .menu-item {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        .menu-item:hover {
            background: rgba(255,255,255,0.1);
            color: white;
            border-left-color: #3498db;
        }

        .menu-item.active {
            background: rgba(52, 152, 219, 0.3);
            color: white;
            border-left-color: #3498db;
        }

        .menu-item i {
            width: 20px;
            text-align: center;
        }

        .sidebar-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.2);
        }

        .main-content {
            margin-left: 250px;
            min-height: 100vh;
        }

        .top-bar {
            background: white;
            border-bottom: 1px solid #e9ecef;
            padding: 20px 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .content-area {
            padding: 30px;
        }

        .info-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .stat-item {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">
            <i class="fas fa-layer-group"></i>协作白板
        </div>
        
        <div style="padding: 10px 0;">
            <a href="/dashboard" class="menu-item">
                <i class="fas fa-home"></i>
                <span>工作台</span>
            </a>
            <a href="/documents" class="menu-item">
                <i class="fas fa-folder"></i>
                <span>我的文档</span>
            </a>
            <a href="/teams" class="menu-item">
                <i class="fas fa-users"></i>
                <span>团队空间</span>
            </a>
            <a href="/templates" class="menu-item">
                <i class="fas fa-th-large"></i>
                <span>模板市场</span>
            </a>
            <a href="/profile" class="menu-item active">
                <i class="fas fa-user-circle"></i>
                <span>个人中心</span>
            </a>
        </div>
        
        <div class="sidebar-footer">
            <div style="margin-bottom: 10px; color: rgba(255,255,255,0.7);" id="userName">
                <i class="fas fa-user"></i> 加载中...
            </div>
            <button class="btn btn-outline-light btn-sm w-100" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
    </div>

    <div class="main-content">
        <div class="top-bar">
            <h4 class="mb-0">个人中心</h4>
        </div>

        <div class="content-area">
            <div class="row">
                <div class="col-md-8 mb-3">
                    <div class="info-card">
                        <h5 class="mb-4"><i class="fas fa-user-edit text-primary me-2"></i>个人信息</h5>
                        <form>
                            <div class="mb-3">
                                <label class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" disabled>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">昵称</label>
                                <input type="text" class="form-control" id="nickname">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">个性签名</label>
                                <textarea class="form-control" id="signature" rows="3"></textarea>
                            </div>
                            <button type="button" class="btn btn-primary" onclick="updateProfile()">
                                <i class="fas fa-save"></i> 保存修改
                            </button>
                        </form>
                    </div>

                    <div class="info-card mt-3">
                        <h5 class="mb-4"><i class="fas fa-key text-warning me-2"></i>修改密码</h5>
                        <form>
                            <div class="mb-3">
                                <label class="form-label">原密码</label>
                                <input type="password" class="form-control" id="oldPassword">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">新密码</label>
                                <input type="password" class="form-control" id="newPassword">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">确认新密码</label>
                                <input type="password" class="form-control" id="confirmPassword">
                            </div>
                            <button type="button" class="btn btn-warning" onclick="updatePassword()">
                                <i class="fas fa-check"></i> 修改密码
                            </button>
                        </form>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="info-card">
                        <h5 class="mb-4"><i class="fas fa-chart-line text-success me-2"></i>统计信息</h5>
                        <div class="stat-item mb-3">
                            <i class="fas fa-file fa-2x text-primary mb-2"></i>
                            <h4 class="mb-0" id="docCount">0</h4>
                            <small class="text-muted">文档总数</small>
                        </div>
                        <div class="stat-item mb-3">
                            <i class="fas fa-users fa-2x text-success mb-2"></i>
                            <h4 class="mb-0" id="collabCount">0</h4>
                            <small class="text-muted">协作次数</small>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-user-friends fa-2x text-warning mb-2"></i>
                            <h4 class="mb-0" id="teamCount">0</h4>
                            <small class="text-muted">团队数量</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const API_BASE_URL = '/api';
        axios.defaults.baseURL = API_BASE_URL;
        axios.interceptors.request.use(config => {
            const token = localStorage.getItem('token');
            if (token) {
                config.headers.Authorization = `Bearer ${token}`;
            }
            return config;
        });

        axios.interceptors.response.use(
            response => response.data,
            error => {
                if (error.response?.status === 401) {
                    localStorage.removeItem('token');
                    window.location.href = '/login';
                }
                alert(error.response?.data?.message || '请求失败');
                return Promise.reject(error);
            }
        );

        function logout() {
            if (confirm('确定要退出登录吗？')) {
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = '/login';
            }
        }

        $(document).ready(function() {
            const token = localStorage.getItem('token');
            if (!token || token === 'undefined' || token === 'null') {
                localStorage.clear();
                window.location.href = '/login';
                return;
            }
            
            try {
                const userStr = localStorage.getItem('user');
                if (userStr && userStr !== 'undefined' && userStr !== 'null') {
                    const user = JSON.parse(userStr);
                    if (user && user.nickname) {
                        $('#userName').html(`<i class="fas fa-user"></i> ${user.nickname}`);
                    }
                }
            } catch (e) {
                console.error('解析用户信息失败', e);
            }
            
            loadProfile();
            loadStats();
        });

        async function loadProfile() {
            try {
                const res = await axios.get('/user/profile');
                const user = res.data;
                
                $('#username').val(user.username);
                $('#nickname').val(user.nickname);
                $('#email').val(user.email || '');
                $('#signature').val(user.signature || '');
            } catch (error) {
                console.error(error);
            }
        }

        async function loadStats() {
            try {
                const res = await axios.get('/user/stats');
                $('#docCount').text(res.data.docCount || 0);
                $('#collabCount').text(res.data.collabCount || 0);
                $('#teamCount').text(res.data.teamCount || 0);
            } catch (error) {
                console.error(error);
            }
        }

        async function updateProfile() {
            try {
                await axios.put('/user/profile', {
                    nickname: $('#nickname').val(),
                    email: $('#email').val(),
                    signature: $('#signature').val()
                });
                
                try {
                    const userStr = localStorage.getItem('user');
                    if (userStr && userStr !== 'undefined' && userStr !== 'null') {
                        const user = JSON.parse(userStr);
                        user.nickname = $('#nickname').val();
                        user.email = $('#email').val();
                        localStorage.setItem('user', JSON.stringify(user));
                    }
                } catch (e) {
                    console.error('更新本地用户信息失败', e);
                }
                
                alert('保存成功');
                location.reload();
            } catch (error) {
                console.error(error);
            }
        }

        async function updatePassword() {
            const oldPassword = $('#oldPassword').val();
            const newPassword = $('#newPassword').val();
            const confirmPassword = $('#confirmPassword').val();

            if (!oldPassword || !newPassword) {
                alert('请填写完整信息');
                return;
            }

            if (newPassword !== confirmPassword) {
                alert('两次密码不一致');
                return;
            }

            try {
                await axios.put('/user/password', {
                    oldPassword: oldPassword,
                    newPassword: newPassword
                });
                
                alert('修改成功，请重新登录');
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = '/login';
            } catch (error) {
                console.error(error);
            }
        }
    </script>
</body>
</html>
